import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Cell, Image, Toast, Divider, Button } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './order-detail.less';

const goBack = () => {
  history.back();
}

export default function OrderDetailPage() {
  return (
    <div className='order-detail'>
      <NavBar title='订单详情' leftText='返回' onClickLeft={goBack} />
      <div className='order-detail-box'>
        <Cell center>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover'
                                  src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' /></Flex.Item>
                <Flex.Item>
                  <div className='order-detail-partner'>小熊</div>
                  <div className='order-detail-type'>密室逃脱</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='order-detail-status'><span className='done'>已完成</span></div>
              <div className='order-detail-price'>¥<span>330</span>.00 <i>x 3</i></div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='order-detail-info'>
          <div className='order-detail-num'>订单编号：20240614214843652 <span className='copy' onClick={() => Toast.info('已复制订单号')}>复制</span></div>
          <div className='order-detail-time'>下单时间：2024-06-14 21:48:43</div>
          <div className='order-detail-time'>完成时间：2024-06-15 21:48:43</div>
          <div className='order-detail-total'>实付：<span>¥<strong>990</strong>.00</span></div>
        </Cell>
      </div>
      <div className='contact-service'>
        <Divider>若对订单有疑问，请联系客服</Divider>
        <Button className='service-btn' type='primary' plain round>联系客服</Button>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
